<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <button @click="count=1">新闻</button>
        <button @click="count=2">音乐</button>
        <button @click="count=3">体育</button>
        <button @click="count=4">电影</button>
      </div>
      <div>
        <ul v-show="count==1">
            <li>奥特曼打怪兽</li>
            <li>奥特曼被打</li>
            <li>怪兽被打</li>
          </ul>
          <ul v-show="count==2">
            <li>小幸运</li>
            <li>再见莫妮卡</li>
          </ul>
          <ul v-show="count==3">
            <li>篮球</li>
            <li>排球</li>
            <li>乒乓球</li>
          </ul>
          <ul v-show="count==4">
            <li>绣春刀</li>
          </ul>
      </div>
      
    </div>

    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 1,
          };
        },
      });
    </script>
  </body>
</html>
